// app/page.tsx
'use client'

import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ShoppingCart } from 'lucide-react'
import { ResponsiveLayout } from "@/components/layout/responsive-layout"
import { useState } from 'react'
import { useShopping } from './contexts/ShoppingContext' // 调整导入路径

const products = [
  {
    id: 1,
    name: "大师风T恤",
    price: 700,
    image: "/images/tshirt.jpg",
    category: "上衣",
  },
  {
    id: 2,
    name: "经典盔甲卫衣",
    price: 620,
    image: "/images/盔甲.jpg",
    category: "上衣",
  },
  {
    id: 3,
    name: "超美仙气裙",
    price: 850,
    image: "/images/裙子.jpg",
    category: "裤子",
  },
  {
    id: 4,
    name: "时尚外套",
    price: 900,
    image: "/images/外套.jpg",
    category: "上衣",
  },
  {
    id: 5,
    name: "舒适卫衣",
    price: 620,
    image: "/images/卫衣.jpg",
    category: "上衣",
  },
  {
    id: 6,
    name: "武当系列大师",
    price: 1200,
    image: "/images/武当.jpg",
    category: "上衣",
  },
  {
    id: 7,
    name: "经典大师款",
    price: 1000,
    image: "/images/大师.jpg",
    category: "上衣",
  },
]

export default function HomePage() {
  const [selectedCategory, setSelectedCategory] = useState('全部')
  const categories = ['全部', '上衣', '裤子', '鞋子', '配饰']

  const { addToCart } = useShopping() // 使用上下文中的 addToCart 方法

  return (
    <ResponsiveLayout>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Promotional Banner */}
        <div className="mb-8 overflow-hidden rounded-xl bg-gradient-to-r from-amber-100 to-amber-200 p-4 sm:p-6 shadow-md transition-transform duration-300 ease-in-out hover:scale-[1.02]">
          <div className="flex flex-col sm:flex-row items-center justify-between">
            <div>
              <h2 className="text-xl sm:text-2xl font-bold mb-2 text-amber-800">夏季新品上市</h2>
              <p className="text-base sm:text-lg text-amber-700 mb-1">清凉舒适，时尚百搭</p>
              <p className="text-sm text-amber-600">活动期间：6.1-8.31</p>
            </div>
            <Image
              src="/images/盔甲.jpg"
              alt="夏季新品"
              width={200}
              height={200}
              className="mt-4 sm:mt-0 rounded-lg object-cover shadow-lg transition-transform duration-300 ease-in-out hover:scale-105"
            />
          </div>
        </div>

        {/* Category Tabs */}
        <div className="mb-8 flex gap-4 sm:gap-6 overflow-x-auto whitespace-nowrap sm:whitespace-normal pb-2">
          {categories.map((category) => (
            <button
              key={category}
              onClick={() => setSelectedCategory(category)}
              className={`rounded-full px-4 py-1 sm:px-6 sm:py-2 text-sm sm:text-base font-medium transition-all duration-300 ${selectedCategory === category
                ? "bg-amber-500 text-white shadow-md hover:bg-amber-600 hover:shadow-lg"
                : "text-gray-500 hover:bg-amber-100 hover:text-amber-800"
                }`}
            >
              {category}
            </button>
          ))}
        </div>

        {/* Product Grid */}
        <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 sm:gap-8">
          {products
            .filter(product => selectedCategory === '全部' || product.category === selectedCategory)
            .map((product) => (
              <div key={product.id} className="overflow-hidden rounded-xl border bg-white shadow-sm transition-all duration-300 hover:shadow-md hover:scale-[1.02]">
                <Image
                  src={product.image}
                  alt={product.name}
                  width={400}
                  height={400}
                  className="aspect-square object-cover"
                />
                <div className="p-3 sm:p-4">
                  <h3 className="text-sm sm:text-lg font-medium mb-2 truncate">{product.name}</h3>
                  <div className="flex items-center justify-between">
                    <p className="text-base sm:text-xl font-bold text-amber-600">¥{product.price}</p>
                    <Button
                      size="sm"
                      className="bg-amber-500 hover:bg-amber-600 text-white transition-colors duration-300"
                      onClick={() => addToCart(product)} // 点击按钮时添加到购物车
                    >
                      <ShoppingCart className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
                      <span className="hidden sm:inline">加入购物车</span>
                    </Button>
                  </div>
                </div>
              </div>
            ))}
        </div>
      </div>
    </ResponsiveLayout>
  )
}
